<template>
  <div class="element">
    <div class="element_table">
      <vxe-table
        border
        height="auto"
        show-overflow
        ref="xTable"
        row-id="id"
        size="mini"
        :loading="loading"
        :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
        :checkbox-config="{reserve: true}"
        :data="tableData"
        @sort-change="sortChange">
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column field="listId" title="listId"></vxe-column>
        <vxe-column v-for="(item) in 10" :field="'attr' + item" :title="'attr' + item" sortable></vxe-column>
      </vxe-table>
      <vxe-pager
        perfect
        size="mini"
        :loading="loading"
        :current-page="tablePage.currentPage"
        :page-size="tablePage.pageSize"
        :page-sizes="tablePage.pageSizes"
        :total="tablePage.totalResult"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
        @page-change="handlePageChange">
      </vxe-pager>
    </div>
  </div>
</template>

<script>
import { httpRequest } from "@/untils/httpRequest";
import VXETable from "vxe-table";

export default {
  name: "Element",
  data() {
    return {
      loading: false,
      tableData: [],
      sortCfg: {
        property: "",
        order: ""
      },
      tablePage: {
        currentPage: 1,
        pageSize: 100,
        pageSizes: [100, 200, 300],
        totalResult: 0
      }
    };
  },
  methods: {
    getData() {
      this.loading = true;
      let params = {
        currentPage: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize,
        property: this.sortCfg.property,
        order: this.sortCfg.order
      };
      var _this = this
      return new Promise(resolve => {
        httpRequest("post", "/component/getArticle", null, params, "proxy").then((res) => {
          if (res && res.data.code === 200) {
            this.loading = false;
            let list = res.data.data.list;
            this.tablePage.totalResult = res.data.data.total;
            this.tableData = list;
            resolve();
          }
        });
      }).then(function(){
        _this.$('.vxe-pager .vxe-pager--jump .vxe-pager--goto').val(_this.tablePage.currentPage)
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      this.getData();
    },
    sortChange({ property, order }) {
      this.sortCfg.order = order;
      this.sortCfg.property = order ? property : null;
      this.getData();
    },
  },
  mounted() {
    this.getData();
  }
};
</script>

<style scoped>
.element {
  padding: 20px;
}

.element_table {
  width: 100%;
  height: calc(100vh - 175px);
}
</style>